import React from 'react';
import styles from './Carousel.module.css';
import { Image, Carousel as AntCarousel } from 'antd';
import { withRouter, RouteComponentProps } from 'react-router-dom';

import carouselImage1 from '../../asstes/carousel1.jpg';

interface PropsType extends RouteComponentProps {
    id: string
}

const CarouselComponent : React.FC<PropsType> = ({id, history}) => {
    return (
        <div onClick={() => history.push(`detail/${id}`)}>
            <AntCarousel autoplay className={styles.slider}>
                <Image src={carouselImage1}/>
                <span onClick={() => history.push(`detail/${id}`) }>详情页{id}</span>
            </AntCarousel>
        </div>
    )
};

export const Carousel = withRouter(CarouselComponent);